#include("../../comm/ListHead.html")
<style>
    .minheight{ height:calc(100vh - 250px); overflow-y:scroll; overflow-x:hidden }
    .tdcurr{ background-color:#f3f3f3 }
    tr:hover{ background-color:#eee }
</style>
<div class="layui-fluid layui-anim layui-anim-scale">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <p style="float:right"><i class="layui-icon layui-icon-refresh hand" lay-active="e1"></i>
                    </p>
                    <i class="layui-icon layui-icon-triangle-r"></i>
                    当前位置 > <span class="color_green">系统缓存信息</span>
                </div>
                <div id="SpaceHtml" class="layui-card-body">

                </div>
            </div>
        </div>
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">
                    <p style="float:right"><i class="layui-icon layui-icon-refresh hand" lay-active="e2"></i>
                    </p>
                    <span class="color_green" id="curr_space"></span>
                </div>
                <div id="KeysHtml" class="layui-card-body minheight">

                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="layui-card">
                <div class="layui-card-header">
                    <p style="float:right"><i class="layui-icon layui-icon-refresh hand" lay-active="e3"></i>
                    </p>
                    <span class="color_green" id="curr_key"></span>
                </div>
                <div id="ValueHtml" class="layui-card-body minheight">

                </div>
            </div>
        </div>
        <div class="layui-col-md5">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span class="color_green" id="curr_value"></span>
                </div>
                <div id="ViewHtml" class="layui-card-body minheight">

                </div>
            </div>
        </div>
    </div>
</div>
<script id="temp_space" type="text/html">
    <table class="layui-table" lay-skin="line">
        <tbody>
        <tr style="text-align:center">
            <td>缓存空间</td>
            <td>有效缓存</td>
            <td>永久有效</td>
            <td>写入磁盘</td>
            <td>存活时长(秒)</td>
            <td>最大数(内存)</td>
            <td>最大数(磁盘)</td>
            <td>磁盘空间(MB)</td>
            <td>磁盘已用(MB)</td>
            <td>详细</td>
        </tr>
        {{# layui.each(d.space_list, function(index, item){ }}
        <tr style="text-align:center" class="{{index==0?'tdcurr':''}}">
            <td>{{ item.name }}</td>
            <td>{{ item.size }}</td>
            <td>{{ item.eternal }}</td>
            <td>{{- item.todisk }}</td>
            <td>{{ item.livesecond }} - {{ item.toidsecond }}</td>
            <td>{{ item.maxmemory }}</td>
            <td>{{ item.maxdisk }}</td>
            <td>{{ item.maxdiskmb }}</td>
            <td>{{ item.diskstore }}</td>
            <td>
                <button value="{{item.name}}" class="layui-btn layui-btn-xs btn-edit" lay-event="ViewKey">查看</button>
            </td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
</script>
<script id="temp_keys" type="text/html">
    <table class="layui-table" lay-skin="line">
        <tbody>
        {{# layui.each(d.keys_list, function(index, item){ }}
        <tr class="{{index==0?'tdcurr':''}}">
            <td>{{ item.name }}</td>
            <td width="20" style="padding:2px;">
                <button value="{{item.name}}" class="layui-btn layui-btn-xs btn-edit" lay-event="ViewValue">查看</button>
            </td>
            <td width="20" style="padding:2px;">
                <button value="{{item.name}}" class="layui-btn layui-btn-xs btn-del" lay-event="DelKey">清空</button>
            </td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
</script>
<script id="temp_value" type="text/html">
    <table class="layui-table" lay-skin="line">
        <tbody>
        {{# layui.each(d.value_list, function(index, item){ }}
        <tr class="{{index==0?'tdcurr':''}}">
            <td>{{ item.name }}</td>
            <td width="20" style="padding:2px;">
                <button value="{{item.index}}" class="layui-btn layui-btn-xs btn-edit" lay-event="ViewIndex">查看</button>
            </td>
        </tr>
        {{# }); }}
        </tbody>
    </table>
</script>
<script id="temp_view" type="text/html">
    <table class="layui-table" lay-skin="line">
        <tbody>
        <tr>
            <td>{{ d.view }}</td>
        </tr>
        </tbody>
    </table>
</script>
<script language="JavaScript">
    var space = '', key = '', value = [];
    layui.use(['laytpl', 'util', 'myTool'], function () {
        var myTool = layui.myTool, util = layui.util, laytpl = layui.laytpl;
        var loadCacheSpace = function () {
            layui.$.get("getCacheSpaceApi", {}, function (result) {
                layui.layer.closeAll();
                space = result.data.space_list[0].name;
                if (result.code == 0) {
                    laytpl(temp_space.innerHTML).render(result.data, function (html) {
                        document.getElementById('SpaceHtml').innerHTML = html;
                    });
                    if (space) loadCacheKeys(space);
                }
            });
        };
        var loadCacheKeys = function (space) {
            $("#curr_space").html("空间:" + space);
            $("#curr_key").html("");
            $("#curr_value").html("");
            $("#ValueHtml").html("");
            $("#ViewHtml").html("");
            layui.$.get("getCacheKeysApi", {space: space}, function (result) {
                layui.layer.closeAll();
                if (result.code == 0) {
                    laytpl(temp_keys.innerHTML).render(result.data, function (html) {
                        document.getElementById('KeysHtml').innerHTML = html;
                    });
                    if (result.data.keys_list.length > 0) {
                        key = result.data.keys_list[0].name;
                        if (key) loadCacheValue(key);
                    }
                }
            });
        };
        var loadCacheValue = function (key) {
            $("#curr_key").html("Key:" + key);
            layui.$.get("getCacheValueApi", {space: space, key: key}, function (result) {
                layui.layer.closeAll();
                if (result.code == 0) {
                    laytpl(temp_value.innerHTML).render(result.data, function (html) {
                        document.getElementById('ValueHtml').innerHTML = html;
                    });
                    value = result.data.value_list;
                    $("#curr_key").html("关键字:" + key + " 创建:" + result.data.c_date + " 调用:" + result.data.hitcount);
                    ViewCacheValueView(0);
                }
            });
        }

        var ViewCacheValueView = function (index) {
            layui.layer.closeAll();
            if (value[index]) {
                laytpl(temp_view.innerHTML).render(value[index], function (html) {
                    document.getElementById('ViewHtml').innerHTML = html;
                });
            }
            $("#curr_value").html("值:" + value[index].name);
        }

        util.event('lay-active', {
            e1: function (othis) {
                layui.layer.load();
                loadCacheSpace();
            }
            , e2: function (othis) {
                layui.layer.load();
                loadCacheKeys(space)
            }
            , e3: function (othis) {
                layui.layer.load();
                loadCacheValue(key);
            }
        });

        util.event('lay-event', {
            ViewKey: function (othis) {
                layui.layer.load();
                space = $(othis).attr("value");
                $(othis).parent().parent().parent().find(".tdcurr").removeClass("tdcurr");
                $(othis).parent().parent().addClass("tdcurr");
                loadCacheKeys(space);
            }
            , ViewValue: function (othis) {
                layui.layer.load();
                key = $(othis).attr("value");
                $(othis).parent().parent().parent().find(".tdcurr").removeClass("tdcurr");
                $(othis).parent().parent().addClass("tdcurr");
                loadCacheValue(key);
            }
            , ViewIndex: function (othis) {
                layui.layer.load();
                console.info($(othis).parent().parent().parent());
                $(othis).parent().parent().parent().find(".tdcurr").removeClass("tdcurr");
                $(othis).parent().parent().addClass("tdcurr");
                ViewCacheValueView($(othis).attr("value"));
            }
            , DelKey: function (othis) {
                key = $(othis).attr("value");
                layui.$.get("DelCacheApi", {space: space, key: key}, function (result) {
                    layui.layer.closeAll();
                    if (result.code == 0) {
                        layer.msg(result.msg);
                        loadCacheKeys(space);
                    }
                });
            }
        });
        loadCacheSpace();
    });
</script>